// export default CarsoueManagement
import { FC, Fragment,useState,useEffect } from "react"
import { Outlet } from "react-router-dom"
import * as api from "@/api"
import { Table,Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { TableRowSelection } from 'antd/es/table/interface';
interface DataType {
  productCode?: number;// 编号
  sort?: any;// 排序
  fenlei?: string;// 分类
  picture?: any;// 图片
  size?: any;// 尺寸
  ahref?: any;// 链接
  joinDate?: string;// 加入时间
  state?: string;// 状态
  caozuo?: any;// 操作
  key?:any
}
let columns: ColumnsType<DataType> = [
  {
    title: 'ID',
    dataIndex: 'productCode',
  },
  {
    title: '排序',
    dataIndex: 'sort',
  },
  {
    title: '分类',
    dataIndex: 'fenlei',
  },
  {
    title: '图片',
    dataIndex: 'picture',
  },
  {
    title: '尺寸',
    dataIndex: 'size',
  },
  {
    title: '链接',
    dataIndex: 'ahref',
  },
  {
    title: '加入时间',
    dataIndex: 'joinDate',
  },
  {
    title: '状态',
    dataIndex: 'state',
  },
  {
    title: '操作',
    dataIndex: 'caozuo',
  },
];
var data: DataType[] = [];
let CarsoueManagement: FC = () => {
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      setSelectedRowKeys(newSelectedRowKeys);
    };
  let [categoryData,setCategoryData]=useState([])
    // 发送请求获取数据
    useEffect(()=>{
      api.getCategory().then(res => {
        console.log(res.data.data)
        let datas = res.data.data
        if (datas) {
          var arr: any = [] 
          datas.map((item:any) => {
            var obj = {
              productCode:item._id,// 编号
              sort:1,// 排序
              fenlei:'轮播图',// 分类
              picture:item.categoryImgurl,// 图片
              joinDate: item.createTime,// 加入时间
              key: item._id,
              state: '已启用',
              caozuo: (<Fragment>
                <button style={{ backgroundColor: "orange", border:"0",color:'white'}}>禁用</button>                
                <button style={{ backgroundColor: "blue", border:"0",color:'white'}}>编辑</button>                
                <button style={{ backgroundColor: "red", border:"0",color:'white'}}>删除</button>
              </Fragment>)
            }
            arr.push(obj)
          })
          console.log(data)
          setCategoryData(arr)
        }
      })
    },[])
  const rowSelection: TableRowSelection<DataType> = {
      
      selectedRowKeys,
      onChange: onSelectChange,
      selections: [
        Table.SELECTION_ALL,
        Table.SELECTION_INVERT,
        Table.SELECTION_NONE,
        {
          key: 'odd',
          text: 'Select Odd Row',
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((_, index) => {
              if (index % 2 !== 0) {
                return false;
              }
              return true;
            });
            setSelectedRowKeys(newSelectedRowKeys);
          },
        },
        {
          key: 'even',
          text: 'Select Even Row',
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((_, index) => {
              if (index % 2 !== 0) {
                return true;
              }
              return false;
            });
            setSelectedRowKeys(newSelectedRowKeys);
          },
        },
      ]
    }
    return <Table rowSelection={rowSelection} columns={columns} dataSource={categoryData} />;
  }
  // <Outlet />
export default CarsoueManagement